* {margin: 0;padding: 0;}

.content { margin: 0 auto; width: 1000px; max-width: 90%; line-height: 1.5em; font-size: 14px;}
.content::after {content: '';display: block;clear: both;}
.header {position: fixed;top: 0;z-index: 100;width: 100%;background: rgba(255, 255, 255, .5);}
.header .logo {display: inline-block;line-height: 60px;font-size: 26px;}

.main {padding-top: 60px;}
.main .left-cont {float: left;width: 240px;line-height: 40px;overflow: auto;}
.main .left-cont dt {font-size: 16px;font-weight: bold;}
.main .left-cont dd {font-size: 14px;color: #444;cursor: pointer;}
.main .left-cont dd:hover {color: #409EFF;}
.main .left-cont dd.is-checked {color: #409EFF;}
.main .right-cont {float: left;padding: 0 20px 100px;width: calc(100% - 240px);box-sizing: border-box; 
	overflow-y: auto;overflow-x:hidden;}
.main .right-cont .link-cont {display: none;}
.main .right-cont .link-cont.is-checked {display: block;}

.cs {height: 1000px;background: rgba(0, 255, 100, .5);}

/*cont内容样式*/
h3 {margin: 55px 0 20px;font-size: 22px;line-height: 30px;font-weight:normal;}
p {margin: 14px 0;font-size: 14px;color: #5e6d82;}
.group {width: 100%; border: 1px solid #ebebeb; box-sizing: border-box;}
.group .show-box {padding: 24px;}
.group .code-box pre {display: none;border-top: 1px solid #ebebeb;}
.group .tag-code-btn {width: 100%;border: none;background: #fff;line-height: 36px;font-size: 16px;text-align: center;
	outline: medium;cursor: pointer; color: #409EFF;border-top: 1px solid #ebebeb;}
.group .tag-code-btn:hover {background: #efefef;}

.color-box .color-row {margin-left: -5px;margin-right: -5px;}
.color-box .color-col {padding: 0 5px;}
.color-box .demo-color-box {padding: 20px;width: 100%;height: 74px;border-radius: 4px;box-sizing: border-box;color: #fff;}
.color-box .demo-color-box div {font-size: 12px;opacity: .69;}
.color-box .bg-border-base {background: #DCDFE6; color: #303133;}
.color-box .bg-border-light {background: #E4E7ED; color: #303133;}
.color-box .bg-border-lighter {background: #EBEEF5; color: #303133;}
.color-box .bg-border-extra-light {background: #F2F6FC; color: #303133;}

.layout-box .group .sp-row {margin-bottom: 20px;}
.layout-box .group .sp-row:last-child {margin-bottom: 0;}
.layout-box .group .group-cont {height: 36px; border-radius: 4px;}
.layout-box .bg-blue-dark {background: #99A9BF;}
.layout-box .bg-blue {background: #D3DCE6;}
.layout-box .bg-blue-light {background: #E5E9F2;}

.icon-box .group .show-box [class*="sp-icon-"] {font-size: 20px;margin-right: 20px;}
.icon-box .icon-lists {width: 100%; border: 1px solid #ebebeb; box-sizing: border-box;}
.icon-box .icon-lists::after {content:'';display: block;clear: both;}
.icon-box .icon-lists li {float: left;width: 16.66%;height: 120px;line-height: 120px;text-align: center; font-size: 12px; color: #666;
	border-right:1px solid #ebebeb;border-bottom:1px solid #ebebeb;margin-bottom:-1px;margin-right: -1px;}
.icon-box .icon-lists li div {display: inline-block;vertical-align: middle;line-height: 30px;}
.icon-box .icon-lists li i {line-height: 30px;font-size: 30px; margin-bottom: 16px;}
.icon-box .icon-lists li span {display:block;line-height: 16px; height: 16px;padding: 5px;}
.icon-box .group .show-box .icon {font-size: 20px; margin-right: 20px;}

@media only screen and (max-width: 768px) {
	.content {max-width: 100%; padding: 0 10px; box-sizing: border-box;}

	.main .left-cont {display: none;}
	.main .right-cont {padding-left: 0; width: 100%;}
}